<!--
  功能：功能描述
  作者：Bai
  邮箱：377930682@qq.com
  时间：2020年12月17日 19:43:06
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
  <div class="module">
    <!-- 按钮 -->
    <div class="btns">
      <!-- {{param}} -->
      <!-- 搜索部分 -->
      <el-form size="defult" inline style="text-align: left">
        <el-form-item label="查找模块：">
          <el-input
            v-model="param.name"
            placeholder="模块名"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            size="medium"
            type="primary"
            icon="el-icon-search"
            @click="loadModules"
            >搜索</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            type="success"
            size="medium"
            @click="toAddHandler"
            icon="el-icon-circle-plus"
            >添加模型</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 增加数据 -->
    </div>
    <!-- /按钮 -->

    <!-- 表格 -->
    <div class="table">
    <el-table
      size="small"
      :data="
        modules.filter(
          (data) =>
            !param.name ||
            data.name.toLowerCase().includes(param.name.toLowerCase())
        )
      "
      stripe
      height="500"
    >
      <el-table-column
        type="index"
        :index="1"
        label="序号"
        align="center"
        width="45"
      ></el-table-column>
      <el-table-column
        label="名称"
        prop="name"
        align="left"
        width="200"
        sortable
      ></el-table-column>
      ​
      <el-table-column
        label="算法"
        prop="algorithm"
        align="left"
        width="120"
      ></el-table-column>

      <el-table-column
        label="所属应用ID"
        prop="applicationId"
        align="center"
        width="100"
      ></el-table-column>
      ​
      <el-table-column
        label="简介"
        prop="introduce"
        align="left"
        width="400"
      ></el-table-column>
      ​
      <el-table-column
        label="状态"
        prop="status"
        align="center"
        width="100"
        :filters="[
          { text: '已发布', value: '已发布' },
          { text: '未发布', value: '未发布' },
        ]"
        :filter-method="filterHandler"
      >
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.status === '已发布' ? 'success' : 'info'"
            disable-transitions
            >{{ scope.row.status }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        prop="createTime"
        align="center"
        sortable
        :formatter="dateFormat"
        width="120"
      ></el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <!-- 定制-插槽 -->
        <template slot-scope="scope">
          <el-button-group>
            <el-button
              :type="scope.row.status === '已发布' ? '' : 'success'"
              size="mini"
              :icon="scope.row.status === '已发布' ? 'el-icon-s-release' : 'el-icon-s-promotion'"
              @click="changeStatus(scope.row)"
            ></el-button>
            <el-button
              type=""
              size="mini"
              icon="el-icon-setting"
              @click="updateHandler(scope.row)"
            ></el-button>
            <el-popconfirm
              title="确定删除吗？"
              @onConfirm="deleteHandler(scope.row)"
            >
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete-solid"
                slot="reference"
              ></el-button>
            </el-popconfirm>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    </div>
    <!-- /表格 -->
    <!-- 抽屉 -->
    <!-- /抽屉 -->
  </div>
</template>

<script>
import { get, post, del } from "@/utils/request";
import moment from "moment";
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      //  保存数据
      param: {},
      modules: [],
      search: "",
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    // 跳转
    // toAddHandler(){
    //   this.$
    // },
    // 查询后台信息
    dateFormat: function (row, column) {
      var date = row[column.property];

      if (date == undefined) {
        return "";
      }

      return moment(date).format("YYYY-MM-DD HH:mm");
    },
    toAddHandler() {
      this.$router.push("/Interfaces/Moudle_create");
    },
    loadModules() {
      let url = "http://121.196.106.124:8888/Module/Query";
      get(url, this.param).then((resp) => {
        this.modules = resp.data;
      });
    },
    deleteHandler(row) {
      let url = "http://121.196.106.124:8888/Module/DeleteById";
      del(url, { id: row.id }).then((resp) => {
        this.$message({ type: "success", message: resp.message });
        this.loadModules();
      });
    },
    updateHandler(row) {
      this.$router.push({
        path: "/Interfaces/Moudle_create",
        query: row,
      });
    },
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
    changeStatus(row) {
      var status = "未发布";
      if(row.status == "未发布"){
        status = "已发布"
      }
      row.status=status;
      let url = "http://121.196.106.124:8888/Module/SaveOrUpdate";
      post(url, row).then((resp) => {
        this.loadModules();
      });
    }
  },
  // 以下是生命周期钩子
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.loadModules();
  },
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
  /**
   * 实例销毁之前调用。在这一步，实例仍然完全可用。
   */
  beforeDestroy() {},
  /**
   * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
   * 所有的事件监听器会被移除，所有的子实例也会被销毁。
   */
  destroyed() {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
.btns {
  margin-top: 0.5em;
  margin-bottom: -0.5em;
  margin-left: 1.0em;
}
.table{
  border: 1px solid rgb(216, 216, 216);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
</style>
